<template>
    <div id="App_MimicDragon">
        <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
            <n-message-provider>
                <n-modal-provider>
                    <section v-if="compControl.page == 0">
                        <hello_folder
                            v-if="compControl.hello_folder.file_list.length == 0"
                            @return:file_list="compControl.hello_folder.handleReturns($event)" />
                        <folder
                            v-else
                            :data="compControl.hello_folder.file_list"
                            @action:back="compControl.hello_folder.file_list = []" />
                    </section>
                    <section v-if="compControl.page == 1">
                        <add></add>
                    </section>
                    <footer class="footer-menu" v-if="compControl.hello_folder.file_list.length == 0">
                        <n-space>
                            <n-button type="text" size="tiny" @click="compControl.page = 0">
                                picker
                            </n-button>
                            <n-button type="text" size="tiny" @click="compControl.page = 1">
                                +1s
                            </n-button>
                        </n-space>
                    </footer>
                </n-modal-provider>
            </n-message-provider>
        </n-config-provider>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import hello_folder from './components/hello_folder.vue'
import folder from './components/folder.vue'
import add from './components/add.vue'
import { NMessageProvider, NModalProvider } from 'naive-ui'
import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui'
import { NButton, NSpace } from 'naive-ui'

const compControl = reactive({
    hello_folder: {
        file_list: [],
        handleReturns(data) {
            compControl.hello_folder.file_list = data
        }
    },
    image_gallery: {},
    page: 0
})
</script>

<style lang="scss" scoped>
#App_MimicDragon {
    background-color: white;
    min-height: 100vh;
    .footer-menu {
        width: 100%;
        opacity: 0.875;
        position: fixed;
        z-index: 1;
        bottom: 0;
        left: 0;
        background-color: #fafafa;
        border-top: 1px solid #00800015;
        padding: 0.125rem 1rem;
        height: 2rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
